<template>
  <div class="batch_send">
    <el-dialog
      title="周转批次下发"
      width="40%"
      top="10%"
      max
      :visible.sync="parentVisible"
      v-dialogDrag
      :close-on-click-modal="false"
      customClass="mes_dialog">
      <div class="table_container">
        <el-table
          :data="formData"
          max-height="250"
          border
          class="table_dialog batch_send_table">
          <mes-col-comp
            :key="index"
            v-for="(column, index) in tableColums.parentCols"
            :column="column">
          </mes-col-comp>
          <el-table-column
            prop="expectTime"
            label="要求送达时间"
            align="center"
            width="160">
            <template slot-scope="scope">
              <div class="plane_startTime">
                <el-date-picker
                  :clearable="false"
                  v-model="scope.row.expectTime"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd 00:00:00"
                  :picker-options="getPickerOptions(scope.row.expectTime)">
                </el-date-picker>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            :resizable="false"
            min-width="90"
            label="操作"
            align="center">
            <template slot-scope="scope">
              <span class="jump_item" @click="childVisible = true">详情</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer mes_btn">
        <el-button type="primary" @click="sendDispatch()">提交</el-button>
        <el-button @click="parentVisible = false">取消</el-button>
      </span>
      <el-dialog
        width="70%"
        title="要料明细"
        v-dialogDrag
        :close-on-click-modal="false"
        :visible.sync="childVisible"
        customClass="mes_dialog"
        append-to-body>
        <div class="table_container">
          <el-table
            :data="[{}]"
            height="440"
            border
            class="table_dialog">
            <mes-col-comp
              :key="index"
              v-for="(column, index) in tableColums.childCols"
              :column="column">
            </mes-col-comp>
          </el-table>
        </div>
        <span slot="footer" class="mes_btn">
          <el-button @click="childVisible = false">关 闭</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>
<script>
import tableColums from './materialDemandCols'
export default {
  name: 'MaterialDemand',
  data() {
    return {
      materialReqList: {}, // 物料需求数据
      formData: [], // 列表数据
      parentVisible: false,
      expectTime: '', // 要求送达时间
      workerderId: '', // 工单ID
      statusObj: {}, // 要料成功后目标状态对象
      materialReq: {}, // 要料单
      saveStatus: true, // 保存禁用
      tableColums: tableColums, // 表格列数组
      childVisible: false,
    }
  },
  computed: {
    // 当前0点0分0秒时间戳
    todayMillisecond() {
      return this.moment(window.serverTime).startOf('day').unix() * 1000
    },
    // 当天最后时间
    todayLastTime() {
      return this.moment(window.serverTime).format('YYYY-MM-DD 23:59:59')
    },
  },
  methods: {
    /**
     * 打开弹窗
     * @param id 工单id
     * @param list 要料列表
     * @param statusObj 要料成功后目标状态对象
     */
    openDialog(id, list, statusObj) {
      if (!list) {
        return this.tipMessage('error', '下发失败')
      }
      this.materialReqList = list[0]
      this.formData = this.materialReqList.materialInvs
      this.materialReq = this.materialReqList.materialReq
      this.expectTime = this.materialReqList.materialReq.requireServiceDate || ''
      this.expectTime = this.expectTime && this.moment(this.expectTime).isBefore(this.todayLastTime) ? this.todayLastTime : this.expectTime
      this.workerderId = id
      this.statusObj = statusObj
      this.parentVisible = true
    },
    /**
     * 时间输入限定（周转表/工序表）
     * @param currentStart 工序计划开始时间（周转/工序）
     */
    getPickerOptions(currentStart) {
      let start = this.todayMillisecond
      // 对比是否有计划开始时间以及计划开始时间是否在当前时间之后
      if (currentStart && this.moment(currentStart).isAfter(this.todayMillisecond)) {
        start = this.moment(currentStart).unix() * 1000
      }
      const minMillisecond = this.moment(start).subtract(1, 'days').unix() * 1000 + 1
      return {
        // 工序计划完成时间不能小于工序计划开始时间和当前时间
        disabledDate(time) {
          return time.getTime() < minMillisecond
        }
      }
    },
    // 保存前数据收集、整理
    collectData() {
      let postData = {
        materialReqInvList: this.materialReqList.materialInvs,
        materialReqList: [this.materialReqList.materialReq],
        ids: this.statusObj.postData.ids,
        actionId: this.statusObj.postData.actionId
      }
      postData.materialReqInvList.map((item) => {
        item.requestQuantity = Number(item.requestQuantity)
      })
      if (Object.values(this.materialReqList.materialReq).length) {
        postData.materialReqList[0].requireServiceDate = this.expectTime
      }
      return postData
    },
    // 保存下发
    sendDispatch() {
      if (this.saveStatus) {
        this.saveStatus = false
        let postData = this.collectData()
        this.$store.dispatch('saveData', {
          method: 'post',
          url: 'a/turnoverbatch/turnoverBatch/materialreqconfirm',
          data: postData,
          noCommit: true
        }).then(() => {
          this.tipMessage('success', '下发成功')
          this.$emit('sendSuccess')
          this.parentVisible = false
        }).finally(() => {
          this.saveStatus = true
        })
      }
    },
    /**
     * 提示
     * @param type 提示类型
     * @param str 提示内容
     */
    tipMessage(type, str) {
      this.$message({
        type: type,
        message: str,
        duration: 1500,
        center: true
      })
    }
  }
}
</script>

<style lang="less">
  .batch_send{
    .dialog_header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
      .dialog_header_left{
        .time_title{
          padding-right: 10px;
        }
        .el-input__icon{
          line-height: 30px;
          color: @mesTableDateIconC;
          font-weight: 600;
          text-align: center;
        }
      }
    }
    .batch_send_table{
      td .cell{
        height: 40px;
      }
      .el-date-editor--date input{
        padding: 0 20px!important;
      }
      .el-table__body td .el-input__prefix {
        left: -6px;
      }
    }
  }
</style>
